<template>
	<div class="dialog-wp" 
		@click="onParClk"
		v-show="isDialogShow">
		<div class="dialog-body">
			<ul class="item">
				<li 
					v-for="(item,index) in itemArr" 
					:class="ifOnFocus(item)">
					<div class="item-label">{{item.name}}</div>
					<div class="input-wp">
						<input type="text" class="input-v" 
							@focus="onInputFocus(item)"
							@blur="onInputBlur(item)"
							:ref="defaultSel(item)"
							v-model.trim="item.val"
						>
					</div>
				</li>
			</ul>
			<div class="btn-wp clearfix">
				<div class="del-btn btn fl" 
					:class="delCanClk"
					@click="onDelClk"
					>
					删除
				</div>
				<div class="success-btn btn fr" 
					:class="isCanClk"
					@click="onComplete">
					完成
				</div>
				<div class="cancel-btn btn fr can-clk" 
					:class="isSure?'is-sure':''"
					@click.stop="onCancelClk">
					<span>取消</span>
				</div>
			</div>
		</div>
		<div class="dialog-mask"></div>
	</div>
</template>
<script type="text/javascript">
	import {mapState,mapMutations} from "vuex"
	export default {
		name: 'dlgCom',
		data () {
			return {
				isSure:false,
				itemArr:[
					{
						id:100,
						name:"名称",
						val:"",
						is_on:false
					},
					{
						id:200,
						name:"网址",
						val:"",
						is_on:false
					}
				]
			};
		},
		created() {
			// this.initItemArr(this.dialogObj);
		},
		mounted() {
			// const vm = this;
			// vm.autoSelInput();
		},
		methods: {
			initItemArr(obj) {
				let vm = this;
				let [nameV,siteV] = vm.itemArr; 
				nameV.val = obj.name;
				siteV.val = obj.address;
			},
			defaultSel(item) {
				let is_def = item.id==100?"defSel":"";
				return is_def;
			},
			onInputFocus(item) {
				item.is_on = true;
			},
			onInputBlur(item) {
				item.is_on = false;
			},
			ifOnFocus(obj) {
				return obj.is_on?"on-focus":""
			},
			autoSelInput() {
				let input = (this.$refs.defSel)[0];
				console.log(input)
				input.focus();
				input.select();
				// selectionStart,selectionEnd
			},
			onCancelClk() {
				const vm = this;
				let [nameV,siteV] = vm.itemArr;
				if(!nameV.val&&!siteV.val) {
					vm.fixDialogShow(false);
					vm.isSure = false;
				}else {
					if(vm.isSure) {
						vm.fixDialogShow(false);
						vm.isSure = false;
						//nameV.val = siteV.val = "";//TODOthink
						vm.getDialogObj({empty:true})
					}else {
						vm.isSure = true;
					}
				}
				
			},
			onParClk() {
				this.isSure = false;
			},
			...mapMutations(["fixDialogShow","getDialogObj","fixItem","delItem","addItem"]),
			onComplete() {
				const vm = this;
				let [nameV,siteV] = vm.itemArr; 
				let name = nameV.val,address = siteV.val;
				if(!nameV.val||!siteV.val) {
					return;
				}
				if(vm.dialogObj.itemId) {
					vm.fixItem({name,address,itemId:vm.dialogObj.itemId})
				}else {
					vm.addItem({name,address})
				}
				vm.getDialogObj({empty:true})
				vm.fixDialogShow(false);
				nameV.val = siteV.val = ""
			},
			onDelClk() {
				const vm = this;
				if(!vm.dialogObj.itemId) {
					return;
				}
				vm.delItem({
					itemId:vm.dialogObj.itemId
				})
				vm.fixDialogShow(false);
				vm.getDialogObj({empty:true})
			}
		},
		computed:{
			...mapState(["isDialogShow","dialogObj"]),
			compDialog() {
				const vm = this;
				let [nameV,siteV] = vm.itemArr;
				nameV.val = vm.dialogObj.name;
				siteV.val = vm.dialogObj.address;
				return vm.dialogObj;
			},
			delCanClk() {
				return this.dialogObj.itemId?"can-del":"";
			},
			isCanClk() {
				const vm = this;
				let [nameV,siteV] = vm.itemArr;
				if(nameV.val&&siteV.val) {
					return "can-clk"
				}else {
					return ""
				}
			}
		},
		watch:{
			compDialog(obj) { //必须监听变化
				console.log("dlgCom watch")
			},
			isDialogShow(newVal,oldVal) {
				const vm = this;
				if(newVal) {
					setTimeout(() => { //TODO clear
					  vm.autoSelInput();
					}, 588)
					
				}
			}
		}
	};
</script>
<style type="text/less" lang="less" scoped>
	.dialog-wp {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		text-align: center;
		.dialog-body {
			padding: 20px;
			height: 328px;
			background-color:#fff;
			box-shadow: 1px 1px 20px #111;
			position:absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 128;
			border-radius: 8px;
			.item {
				.on-focus {
					.item-label {
						color: #1a73e8;
					}
					.input-wp {
						// border-bottom: 2px solid #1a73e8;
						position:relative;
						&:after {
							content:"";
							height: 2px;
							display: block;
							width: 100%;
							background-color:#1a73e8;
							position:absolute;
							bottom: 0;
							left: 50%;
							transform:translate(-50%,0);
							animation:stretchAnima  0.22s linear forwards;
						}
					}
				}
				.item-label {
					text-align: left;
					margin-bottom: 5px;
				}
				.input-wp {
					width: 600px;
					height: 60px;
					border:none;
					border-radius:6px;
					overflow: hidden;
					background-color:#cccbcb;
					input {
						width: 100%;
						height: 100%;
						border:none;
						background-color:transparent;
						text-indent: 10px;
						caret-color:#1a73e8;
						font-size: 20px;
						&:focus {
							outline: none;
							
						}
					}
				}
			}
			.btn-wp {
				margin-top: 36px;
				.btn {
					height: 56px;
					line-height: 56px;
					padding:0px 25px;
					font-size: 30px;
					border-radius:5px;
					border:1px solid #ccc;
					cursor: pointer;
					user-select: none;
					&.fl {
						float: left;
					}
					&.fr {
						float: right;
						margin-left: 15px;
					}
					
					&.del-btn {
						background-color:#fff;
						color: #333;
						&.can-del {
							color: #1a73e8;
						}
					}
					&.success-btn {
						border:none;
						background-color:#ccc;
						&.can-clk {
							color: #fff;
							background-color:#1a73e8;
						}
					}
					&.cancel-btn {
						border:none;
						padding:4px;
						box-sizing: content-box;
						&.can-clk {
							&.is-sure {
								border:3px solid #1a73e8;
							}
							
						}
						span {
							border:1px solid #ccc;
							display: inline-block;
							padding:0px 25px;
							border-radius:5px;
						}
					}
					&.can-clk {
						color: #1a73e8;
					}
				}
			}
		}
		.dialog-mask {
			position:absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #000;
			opacity: 0.2;
			display: inline-block;
			vertical-align: middle;
		}
		@keyframes stretchAnima {
			0% {
				width: 0;
			}
			100% {
				width: 100%;
			}
		}
	} 
</style>